

<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <template #right>
        <van-search
          v-model="searchText"
          placeholder="搜索"
          class="custom-search"
          shape="round"
          right-icon="shop-o"
          @clear="onClear"
          @focus="toSearch"
        ></van-search>
      </template>
    </van-nav-bar>
    <div v-if="searchResults.length">
      <van-cell
        v-for="item in searchResults"
        :key="item.id"
        @click="selectItem(item)"
      >
        <!-- 添加右侧图标 -->
        <template #right-icon>
          <van-icon name="search" class="search-icon" />
        </template>
        <!-- 定义描述信息 -->
        <template #default>
          <div class="container">
            <div class="custom-content">
              <img :src="iconUrl" class="custom-icon" />
              <h4 class="custom-title">{{ item.name.storeName }}</h4>
            </div>
            <div class="search-label">
              {{ item.label }}
            </div>
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const searchText = ref("");
const searchResults = ref([]);

const merchants = ref([]);
onMounted(() => {
  try {
    const serializedMerchants = route.query.merchants;
    if (serializedMerchants) {
      const parsedMerchants = JSON.parse(serializedMerchants);
      merchants.value = parsedMerchants;
    } else {
      console.log("没有获取到商家数据");
    }
  } catch (error) {
    console.log("上面的代码错误", error);
  }
});
//点击返回上一级
const onClickLeft = () => {
  //返回按键被点击
  router.push("/first");
};
const iconUrl = ref(
  "https://information-system.oss-cn-beijing.aliyuncs.com/0398fdfb-6cd2-48bf-a1d7-2e46966c9de6.png"
); //搜索到的记录的左边的图标

// 监听 searchText 的变化
watch(searchText, (newValue) => {
  if (newValue.trim() === "") {
    searchResults.value = [];
    return;
  }
  // 异步请求搜索结果
  setTimeout(() => {
    //过滤出商家列表里边包含newValue字符串的商家
    const results = merchants.value.filter((item) =>
      item.storeName.includes(newValue)
    );
    //这些项经过map处理后进行存放
    searchResults.value = results.map((item, index) => ({
      id: index,
      name: item,
      label: `评价4.5 配送费¥5 200m`, // 示例标签信息
    }));
  }, 300);
});

const onClear = () => {
  searchText.value = "";
  searchResults.value = [];
};

const toSearch = () => {
  // 搜索框获得焦点时的逻辑
};

const selectItem = (item) => {
  // 处理选中项的逻辑
  console.log("选项被点击:" + item.name);
  console.log(item.name);
  //item.name表示被点击的对应的商家JSON.stringify(item.name)
  router.push({
    path: "/business",
    query: { merchantId: item.name.businessId },
  });
};
</script>

<style scoped>
/* 自定义样式 */
/* 搜索结果右侧图标的样式 */
.search-icon {
  font-size: 30px;
  line-height: inherit;
}
::v-deep.van-search.custom-search {
  width: 85vw;
  /* margin-right: 10px; */
}

/* 标题内容与图标之间的样式 */
.custom-content {
  display: flex; /* 使用 flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}
/* 标题内容与标签内容之间的样式 */
.container {
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column; /* 设置子元素垂直排列 */
  align-items: flex-start; /* 子元素在交叉轴上从顶部开始对齐 */
}
/* 图标自己的样式 */
.custom-icon {
  height: 40px; /* 图标高度 */
  margin-right: 8px; /* 图标和标题之间的间距 */
}
/* 标题内容自己的样式 */
.custom-title {
  font-size: 18px; /* 设置字体大小 */
  color: #0eb3dc; /* 设置字体颜色 */
  font-weight: bold; /* 设置字体加粗 */
  margin: 0; /* 重置外边距 */
  padding: 0; /* 重置内边距 */
  /* 其他样式... */
}
/* 标签自己的:评分，配送费等内容的样式 */
.search-label {
  color: rgb(17, 150, 216);
  margin-left: 50px;
}
</style>